<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Responsive Bootstrap 4 Admin Template">
  <meta name="author" content="Bootlab">

  <title>demo_客户_资产_应收账款_detail</title>

  <link href="css/classic.css" rel="stylesheet">
  <link href="css/ext.css" rel="stylesheet">
  <style>
  #chartjs-bar {
	max-width: 800px;
  max-height: 800px;
	margin: 1em auto;
}
  </style>
</head>

<body>
  <div class="wrapper">

    <nav class="sidebar">
      <div class="sidebar-content">
        <a class="sidebar-brand" href="index.html">
          <i class="align-middle" data-feather="box"></i>
          <span class="align-middle">AppStack</span>
        </a>
      </div>
      <ul id='sidebar-menu' class="sidebar-nav">
        <script id="script_menu" type="text/x-handlebars-template">

          {{#each menuitems}}
            <li class="sidebar-header">
              {{title}}
            </li>
            {{#if groups}}
              {{#each groups}}
                <li class="sidebar-item" {{#if ../actived }} active {{/if}}>

                  <a href="{{href}}" data-toggle="collapse" class="sidebar-link 	{{#if this.actived}} {{else}} collapsed {{/if}}">
                    <i class="align-middle" data-feather={{icon}}></i> <span class="align-middle">{{title}}</span>
                  </a>

                  {{#if items}}
                    <ul id="{{id}}" class="sidebar-dropdown list-unstyled collapse  	{{#if this.actived}} show {{else}} {{/if}}">
                      {{#each items}}

                        <li class="sidebar-item {{#if actived}} active {{/if}}">
                          <a class="sidebar-link " href={{href}}>{{title}}</a>
                        </li>
                      {{/each}}
                    </ul>
                  {{/if}}
                </li>
              {{/each}}
            {{/if}}
          {{/each}}
        </script>
      </ul>
    </nav>

    <div class="main">
      <nav class="navbar navbar-expand navbar-light bg-white">
        <a class="sidebar-toggle d-flex mr-2">
          <i class="hamburger align-self-center"></i>
        </a>

        <form class="form-inline d-none d-sm-inline-block">
          <input class="form-control mr-sm-2" type="text" placeholder="Search projects" aria-label="Search">
        </form>

        <div class="navbar-collapse collapse">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
              <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
                <div class="position-relative">
                  <i class="align-middle" data-feather="message-circle"></i>
                  <span class="indicator">4</span>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="messagesDropdown">
                <div class="dropdown-menu-header">
                  <div class="position-relative">
                    4 New Messages
                  </div>
                </div>
                <div class="list-group">
                  <a href="#" class="list-group-item">
                    <div class="row no-gutters align-items-center">
                      <div class="col-2">
                        <img src="img/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Ashley Briggs">
                      </div>
                      <div class="col-10 pl-2">
                        <div class="text-dark">Ashley Briggs</div>
                        <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div>
                        <div class="text-muted small mt-1">15m ago</div>
                      </div>
                    </div>
                  </a>
                  <a href="#" class="list-group-item">
                    <div class="row no-gutters align-items-center">
                      <div class="col-2">
                        <img src="img/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="Carl Jenkins">
                      </div>
                      <div class="col-10 pl-2">
                        <div class="text-dark">Carl Jenkins</div>
                        <div class="text-muted small mt-1">Curabitur ligula sapien euismod vitae.</div>
                        <div class="text-muted small mt-1">2h ago</div>
                      </div>
                    </div>
                  </a>
                  <a href="#" class="list-group-item">
                    <div class="row no-gutters align-items-center">
                      <div class="col-2">
                        <img src="img/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Stacie Hall">
                      </div>
                      <div class="col-10 pl-2">
                        <div class="text-dark">Stacie Hall</div>
                        <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.</div>
                        <div class="text-muted small mt-1">4h ago</div>
                      </div>
                    </div>
                  </a>
                  <a href="#" class="list-group-item">
                    <div class="row no-gutters align-items-center">
                      <div class="col-2">
                        <img src="img/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Bertha Martin">
                      </div>
                      <div class="col-10 pl-2">
                        <div class="text-dark">Bertha Martin</div>
                        <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.
                        </div>
                        <div class="text-muted small mt-1">5h ago</div>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="dropdown-menu-footer">
                  <a href="#" class="text-muted">Show all messages</a>
                </div>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-toggle="dropdown">
                <div class="position-relative">
                  <i class="align-middle" data-feather="bell-off"></i>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="alertsDropdown">
                <div class="dropdown-menu-header">
                  4 New Notifications
                </div>
                <div class="list-group">
                  <a href="#" class="list-group-item">
                    <div class="row no-gutters align-items-center">
                      <div class="col-2">
                        <i class="text-danger" data-feather="alert-circle"></i>
                      </div>
                      <div class="col-10">
                        <div class="text-dark">Update completed</div>
                        <div class="text-muted small mt-1">Restart server 12 to complete the update.</div>
                        <div class="text-muted small mt-1">2h ago</div>
                      </div>
                    </div>
                  </a>
                  <a href="#" class="list-group-item">
                    <div class="row no-gutters align-items-center">
                      <div class="col-2">
                        <i class="text-warning" data-feather="bell"></i>
                      </div>
                      <div class="col-10">
                        <div class="text-dark">Lorem ipsum</div>
                        <div class="text-muted small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div>
                        <div class="text-muted small mt-1">6h ago</div>
                      </div>
                    </div>
                  </a>
                  <a href="#" class="list-group-item">
                    <div class="row no-gutters align-items-center">
                      <div class="col-2">
                        <i class="text-primary" data-feather="home"></i>
                      </div>
                      <div class="col-10">
                        <div class="text-dark">Login from 192.186.1.1</div>
                        <div class="text-muted small mt-1">8h ago</div>
                      </div>
                    </div>
                  </a>
                  <a href="#" class="list-group-item">
                    <div class="row no-gutters align-items-center">
                      <div class="col-2">
                        <i class="text-success" data-feather="user-plus"></i>
                      </div>
                      <div class="col-10">
                        <div class="text-dark">New connection</div>
                        <div class="text-muted small mt-1">Anna accepted your request.</div>
                        <div class="text-muted small mt-1">12h ago</div>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="dropdown-menu-footer">
                  <a href="#" class="text-muted">Show all notifications</a>
                </div>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
                <span class="d-inline-block d-md-none">
                  <i class="align-middle" data-feather="settings"></i>
                </span>
                <span class="d-none d-sm-inline-block">
                  <img src="img/avatar.jpg" class="avatar img-fluid rounded-circle mr-1" alt="Chris Wood" /> <span class="text-dark">Chris Wood</span>
                </span>
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="user"></i> Profile</a>
                <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="pie-chart"></i>
                  Analytics</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Settings & Privacy</a>
                <a class="dropdown-item" href="#">Help</a>
                <a class="dropdown-item" href="#">Sign out</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>

      <main class="content">
        <div class="container-fluid p-0">
          <div class="row">
            <div class="col-4 col-lg-4">
              <div class="card">
                <div class="card-header">

                  <div class="card-actions float-right">
                    <div class="dropdown show">

                      <a href="#" data-toggle="dropdown" data-display="static">
                        <i class="align-middle text-mute" data-feather="bell-off"></i>
                      </a>

                      <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </div>


                  </div>

                  <h5 class="card-title">资产基本信息</h5>

                </div>
                <div class="card-body">
                  <div class="form-group">
                    <label>资产编号</label>
                    <input type="text" class="form-control" value='ASSERT_20210526_001' disabled>
                    <span class="font-13 text-muted">e.g "ASSET0001"</span>
                  </div>
                  <div class="form-group">
                    <label>资产形态</label>
                    <select class="form-control">
                      <option selected>包</option>
                      <option>池</option>
                      <option>笔</ption>
                    </select>
                    <span class="font-13 text-muted">e.g "池、包、笔"</span>
                  </div>
                  <div class="form-group">
                    <label>融资模式</label>
                    <select class="form-control">
                      <option selected>单笔</option>
                      <option>多笔</option>
                    </select>
                    <span class="font-13 text-muted">e.g "单笔、多笔"</span>
                  </div>


                </div>
                <div class="card-footer">
                  <button type="submit" class="btn btn-primary">提交变更申请</button>
                  <button type="submit" class="btn btn-primary">保存变化</button>
                </div>
              </div>
            </div>
            <div class="col-8 col-lg-8">
              <div class="row">
                <div class="col-sm-4">
                  <div class="card flex-fill">
                    <div class="card-header">
                      <span class="badge badge-success float-right">元</span>
                      <h5 class="card-title mb-0">资产金额</h5>
                    </div>
                    <div class="card-body my-2">
                      <div class="media">
                        <div class="d-inline-block mt-2 mr-3">
                          <i class="feather-lg text-success" data-feather="dollar-sign"></i>
                        </div>
                        <div class="media-body">
                          <h3 class="mb-2">10,000,000

                          </h3>

                          <div class="mb-0"></div>
                        </div>
                      </div>
                    </div>
                    <div class="card-footer">
                      <span class="font-13 text-muted">入资产票据金额和 </span>

                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="card flex-fill">
                    <div class="card-header">
                      <span class="badge badge-secondary float-right">元</span>
                      <h5 class="card-title mb-0">资产下已融资敞口</h5>
                    </div>
                    <div class="card-body my-2">
                      <div class="media">
                        <div class="d-inline-block mt-2 mr-3">
                          <i class="feather-lg text-secondary" data-feather="dollar-sign"></i>
                        </div>
                        <div class="media-body">
                          <h3 class="mb-2">3,000,000
                            <!-- <small class="delta-indicator delta-positive">11%
                          环比</small> -->
                          </h3>

                          <div class="mb-0"></div>
                        </div>
                      </div>
                    </div>
                    <div class="card-footer">
                      资产已融资借据未还本金金额

                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="card flex-fill">
                    <div class="card-header">
                      <span class="badge badge-info float-right">元</span>
                      <h5 class="card-title mb-0">资产下已回款金额</h5>
                    </div>
                    <div class="card-body my-2">
                      <div class="media">
                        <div class="d-inline-block mt-2 mr-3">
                          <i class="feather-lg text-info" data-feather="dollar-sign"></i>
                        </div>
                        <div class="media-body">
                          <h3 class="mb-2">2,000,000
                            <!-- <small class="delta-indicator delta-positive">11%
                          环比</small> -->
                          </h3>

                          <div class="mb-0"></div>
                        </div>
                      </div>
                    </div>
                    <div class="card-footer">
                      <button type="submit" class="btn btn-sm btn-primary float-right">详情</button>
                    </div>
                  </div>
                </div>

              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="card flex-fill">
                    <div class="card-header">
                      <span class="badge badge-success float-right">元</span>
                      <h5 class="card-title mb-0">资产价值</h5>
                    </div>
                    <div class="card-body my-2">
                      <div class="media">
                        <div class="d-inline-block mt-2 mr-3">
                          <i class="feather-lg text-success" data-feather="dollar-sign"></i>
                        </div>
                        <div class="media-body">
                          <h3 class="mb-2">10,000,000

                          </h3>

                          <div class="mb-0"></div>
                        </div>
                      </div>
                    </div>
                    <div class="card-footer">
                      <span class="font-13 text-muted">资产价值= 入资产票据 * 折扣率 </span>
                      <button type="submit" class="btn btn-sm btn-primary float-right">详情</button>
                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="card flex-fill">
                    <div class="card-header">
                      <span class="badge badge-secondary float-right">元</span>
                      <h5 class="card-title mb-0">资产下可融资金额试算</h5>
                    </div>
                    <div class="card-body my-2">
                      <div class="media">
                        <label class="form-label"> <i class="feather-lg text-mute" data-feather="calendar"></i>到期日期</label>
                        <div class="media-body">
                          <input class="form-control ml-1" type="text" name="datesingle" />

                          <div class="mb-0"></div>
                        </div>
                      </div>
                    </div>
                    <div class="card-footer">
                      <span class="font-13 text-muted">试算结果: </span>
                      <button type="submit" class="btn btn-sm btn-info float-right">试算</button>
                    </div>
                  </div>
                  <script>
                    document.addEventListener("DOMContentLoaded", function(event) {


                      $('input[name="datesingle"]').daterangepicker({
                        singleDatePicker: true,
                        showDropdowns: true
                      });
                      var start = moment().subtract(29, 'days');
                      var end = moment();


                    });
                  </script>
                </div>
                <div class="col-sm-4">
                  <div class="card flex-fill">
                    <div class="card-header">
                      <span class="badge badge-info float-right">元</span>
                      <h5 class="card-title mb-0">资产下回款逾期金额</h5>
                    </div>
                    <div class="card-body my-2">
                      <div class="media">
                        <div class="d-inline-block mt-2 mr-3">
                          <i class="feather-lg text-danger" data-feather="dollar-sign"></i>
                        </div>
                        <div class="media-body">
                          <h3 class="mb-2">100
                            <!-- <small class="delta-indicator delta-positive">11%
                          环比</small> -->
                          </h3>

                          <div class="mb-0"></div>
                        </div>
                      </div>
                    </div>
                    <div class="card-footer">
                      <button type="submit" class="btn btn-sm btn-primary float-right">详情</button>
                    </div>
                  </div>
                </div>

              </div>


            </div>

          </div>



          <div class="row">
            <div class="col-6 col-lg-6">
              <div class="card  flex-fill ">
                <div class="card-header">
                  <h5 class="card-title">借据到期日资产缺口分析</h5>
                  <h6 class="card-subtitle text-muted"> </h6>
                </div>
                <div class="card-body">
                  <div class="chart">
                    <div id="chartjs-bar"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-6 col-lg-6">
              <div class="card w-100">
                <div class="card-header mb-2">

                  <h5 class="card-title">资产项下-单据</h5>
                  <h6 class="card-subtitle text-muted">资产项下已经认定单据构成</h6>
                </div>
                <div class="card-body">
                  <table class="table row-border" id="loan">
                    <thead>
                      <tr>
                        <th>借据编号</th>
                        <th style="width:15%">借据金额</th>
                        <th style="width:15%">借据余额</th>
                        <th style="width:15%">借据状态</th>
                        <th class="d-none d-md-table-cell" style="width:15%">起始日期</th>
                        <th class="d-none d-md-table-cell" style="width:15%">到期日期</th>
                        <th>详情</th>
                      </tr>
                    </thead>

                  </table>
                </div>
                <script>
                  document.addEventListener("DOMContentLoaded", function() {


                    // 定义的数组,根据数组,渲染生成页面内容
                    //定义数据
                    var arr = [
                      ['1110123125', 79100, 79100, '逾期', '2020-01-01', '2020-04-01', ''],
                      ['1110123123', 28000, 26900, '正常', '2020-01-01', '2020-06-01', ''],
                      ['1110123124', 24500, 24500, '正常', '2020-01-01', '2020-07-01', ''],
                      ['1110123126', 51300, 51300, '正常', '2020-01-01', '2020-09-01', '']

                    ];

                    var sum_evidence = arr.reduce(function(total, cur, index, array) {

                      total += cur[1]
                      return total
                    }, 0)
                    var sum_evidence_exposure = arr.reduce(function(total, cur, index, array) {

                      total += cur[2]
                      return total
                    }, 0)


                    // 定义变量,存储要写入的内容
                    $('#loan').DataTable({
                      data: arr,
                      "bAutoWidth": false,
                      "order": [
                        [4, "desc"]
                      ],
                      "infoCallback": function(settings, start, end, max, total, pre) {
                        var api = this.api();
                        var pageInfo = api.page.info();

                        return `<span class='mr-1'>借据合计:</span><span class="  badge badge-primary ">${sum_evidence}</span> 元 <span class='mr-1'>认定资产金额合计:</span><span class="  badge badge-primary ">${sum_evidence_exposure}</span> 元`
                      },
                      columns: [{
                          // title: "单据号码"
                        },
                        {
                          // title: "单据类型"
                        },
                        {
                          // title: "单据票面金额"
                          className: 'dt-body-right',
                          render: function(data, type, row) {
                            return '￥' + data;
                          }
                        },
                        {
                          // title: "单据-销售方"
                        },

                        {
                          className: 'dt-body-right',
                          render: function(data, type, row) {
                            return '￥' + data;
                          }
                        },
                        {

                          className: 'dt-body-right',
                          render: function(data, type, row) {
                            return '￥' + data;
                          }
                        },

                        {
                          title: "详情",
                          render: function(data, type, row, meta) {

                            return type === 'display' ?
                              `<td class="table-action"><a href="demo_凭证_单据_发票_detail.html"><i class="align-middle" data-feather="eye"></i></a></td>` :
                              ''
                          }
                        }
                      ]
                    });

                  });
                </script>
              </div>
            </div>

          </div>

        </div>

        <div class="row">

          <div class="col-12 col-lg-12">
            <div class="card">
              <div class="card-header mb-2">
                <div class="card-actions float-right">
                  <div class="btn-group">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      操作
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="">增加单据</a>
                      <a class="dropdown-item" href="#">批量增加单据</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">提交变更申请</a>
                      <a class="dropdown-item" href="#">查看变更申请状态</a>
                    </div>
                  </div>
                </div>
                <h5 class="card-title">资产项下-单据</h5>
                <h6 class="card-subtitle text-muted">资产项下已经认定单据构成</h6>
              </div>
              <div class="card-body">
                <table class="table row-border" id="debit_evidence">
                  <thead>
                    <tr>
                      <th style="width:10%;">单据号码</th>
                      <th style="width:8%">单据类型</th>
                      <th style="width:8%">票面金额</th>
                      <th style="width:10%">销方</th>
                      <th style="width:10%">购方</th>
                      <th style="width:8%">认定金额</th>
                      <th style="width:8%">剩余金额</th>
                      <th class="d-none d-md-table-cell" style="width:10%">开具日期</th>
                      <th class="d-none d-md-table-cell" style="width:10%">付款日期</th>
                      <th style="width:10%">单据状态</th>
                      <th>详情</th>
                    </tr>
                  </thead>

                </table>
              </div>
              <script>
                document.addEventListener("DOMContentLoaded", function() {


                  // 定义的数组,根据数组,渲染生成页面内容
                  var arr = [
                    ['1110123123', '发票', 18123, '瑞康', '医院1', 123, 18123, '2020-01-01', '2020-08-01', '有效', ''],
                    ['1110123124', '发票', 1813, '瑞康', '医院1', 180, 1813, '2020-01-01', '2020-08-01', '有效', ''],
                    ['1110123125', '发票', 18500, '瑞康', '医院1', 1800, 18500, '2020-01-01', '2020-08-01', '红冲撤销', ''],
                    ['1110123126', '发票', 17000, '瑞康', '医院1', 7999, 7000, '2020-01-01', '2020-08-01', '有效', ''],
                    ['1110123126', '发票', 12000, '瑞康', '医院2', 1199, 12000, '2020-01-01', '2020-08-01', '无效', ''],
                    ['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '2020-01-01', '2020-08-01', '有效', ''],
                    ['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '2020-01-01', '2020-08-01', '有效', ''],
                    ['1110123126', '发票', 18000, '瑞康', '医院2', 2999, 18000, '2020-01-01', '2020-08-01', '有效', ''],
                    ['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '2020-01-01', '2020-08-01', '有效', ''],
                    ['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '2020-01-01', '2020-08-01', '有效', ''],
                    ['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '2020-01-01', '2020-08-01', '有效', ''],
                    ['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '2020-01-01', '2020-08-01', '有效', '']
                  ];

                  var sum_evidence = arr.reduce(function(total, cur, index, array) {

                    total += cur[2]
                    return total
                  }, 0)
                  var sum_evidence_asset_value = arr.reduce(function(total, cur, index, array) {

                    total += cur[5]
                    return total
                  }, 0)


                  // 定义变量,存储要写入的内容
                  $('#debit_evidence').DataTable({
                    data: arr,
                    "bAutoWidth": false,
                    "order": [
                      [4, "desc"]
                    ],
                    "infoCallback": function(settings, start, end, max, total, pre) {
                      var api = this.api();
                      var pageInfo = api.page.info();

                      return `<span class='mr-1'>发票票面金额合计:</span><span class="  badge badge-primary ">${sum_evidence}</span> 元 <span class='mr-1'>认定资产金额合计:</span><span class="  badge badge-primary ">${sum_evidence_asset_value}</span> 元`
                    },
                    columns: [{
                        // title: "单据号码"
                      },
                      {
                        // title: "单据类型"
                      },
                      {
                        // title: "单据票面金额"
                        className: 'dt-body-right',
                        render: function(data, type, row) {
                          return '￥' + data;
                        }
                      },
                      {
                        // title: "单据-销售方"
                      },
                      {


                      },
                      {
                        className: 'dt-body-right',
                        render: function(data, type, row) {
                          return '￥' + data;
                        }
                      },
                      {

                        className: 'dt-body-right',
                        render: function(data, type, row) {
                          return '￥' + data;
                        }
                      },
                      {
                        className: 'dt-body-right'
                      },
                      {

                      },
                      {

                      },
                      {
                        title: "详情",
                        render: function(data, type, row, meta) {

                          return type === 'display' ?
                            `<td class="table-action"><a href="#"><i class="align-middle mr-1" data-feather="delete"></i></a><a href="demo_凭证_单据_发票_detail.html"><i class="align-middle" data-feather="eye"></i></a></td>` :
                            ''
                        }
                      }
                    ]
                  });

                });
              </script>
            </div>
          </div>
        </div>



      </main>
    </div>

    <script src="js/app.js"></script>
    <script src="js/initDataTables.js"></script>
    <script src="js/libs/handlebars/handlebars.min-v4.7.7.js"></script>

    <script src="js/initMenuMessageAlert.js"></script>

    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function() {

        initSidebarMenu(2, 1, 0)

        var tpl_siderbar = $("#script_menu").html();
        var template_sdb = Handlebars.compile(tpl_siderbar);
        var content = template_sdb(menu_json_data);
        $("#sidebar-menu").html(content)

        //模版渲染
        var tpl_alerts = $("#script_alerts").html();
        var template_alt = Handlebars.compile(tpl_alerts);
        var content = template_alt(alerts);
        $("#alerts").html(content)



        //模版渲染
        var tpl_messages = $("#script_messages").html();
        var template_msg = Handlebars.compile(tpl_messages);
        var content = template_msg(messages);
        $("#messages").html(content)



      });
    </script>





    <script>
      Handlebars.registerHelper("debug", function(optionalValue) {

        console.log("Current Context");

        console.log("====================");

        console.log(this);

        if (optionalValue) {

          console.log("Value");

          console.log("====================");

          console.log(optionalValue);

        }
      });
    </script>


    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function() {
        //获取模版里面的内容
        var tpl = $("#entry1").html();

        //模版渲染
        var template = Handlebars.compile(tpl);

        //定义数据
        var json_data_arr = [
          ['1110123123', 18123, 18123, '正常', '2020-01-01', '2020-06-01', ''],
          ['1110123124', 1813, 78, '正常', '2020-01-01', '2020-07-01', ''],
          ['1110123125', 1811, 811, '逾期', '2020-01-01', '2020-04-01', ''],
          ['1110123126', 17123, 17123, '正常', '2020-01-01', '2020-09-01', ''],
          ['1110123126', 17123, 17123, '正常', '2020-01-01', '2020-10-01', ''],
          ['1110123126', 17123, 17123, '正常', '2020-08-01', '2020-09-01', '']
        ];
        var content = template(json_data_arr);



        //模版装载到dom节点上
        $("#table-debit").html(content)
      });
    </script>

    <script src="js/libs/highcharts/highcharts.js"></script>
    <script src="js/libs/highcharts/highcharts-more.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {

        Highcharts.setOptions({

          colors: [
            '#000000',
            '#4E9F8E',
            '#D9D9D9', '#70b299', '#A180DA'
          ]
        });
        Highcharts.chart('chartjs-bar', {
          chart: {
            type: 'column'
          },
          title: {
            text: ' '
          },
          xAxis: {
            title: {
              text: '到期日期'
            },
            categories: [
              "202004",

              "202006",
              "202007",

              "202009"
            ]
          },
          yAxis: {
            min: 0,
            title: {
              text: '万元'
            },
            stackLabels: {
              enabled: true,
              style: {
                fontWeight: 'bold',
                color: ( // theme
                  Highcharts.defaultOptions.title.style &&
                  Highcharts.defaultOptions.title.style.color
                ) || 'gray'
              }
            }
          },
          legend: {

            backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
          },
          tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}'
          },
          plotOptions: {
            column: {
              stacking: 'normal',
              dataLabels: {
                enabled: false
              }
            }
          },
          credits: {
            enabled: false
          },
          series: [{
            name: '资产缺口',
            data: [
              2,
              0,
              0,
              0,

            ],
            stack: '资产'
          }, {
            name: '有效资产',
            data: [
              5.91,
              2.69,
              2.45,
              5.13

            ],
            stack: '资产'
          }, {
            name: '借据敞口',
            data: [
              7.91,
              2.69,
              2.45,
              5.13

            ],
            stack: '借据'
          }]





        });
      });
    </script>

</body>

</html>
